<template>
	<view id="notifyBar">
		<view class="notify">
			<view class="switch">
				<view class="switchBar">
					<view class="map tabBtn" @tap="itemClick(0)" :class="{active: currentIndex == 0}">
						<image :src="srcImgMap" mode="" class="image"></image>
					</view>
					<view class="list tabBtn" @tap="itemClick(1)" :class="{active: currentIndex == 1}">
						<image :src="srcImgList" mode="" class="image"></image>
					</view>
				</view>
			</view>
			<view class="notices">
				<Notices :message="notices" :background="color"></Notices>
			</view>
		</view>
	</view>
</template>

<script>
	import Notices from '../../../components/common/Notices.vue'
	export default {
		name: 'NotifyBar',
		components: {
			Notices
		},
		props: {
			notices: {
				type: String,
				default() {
					return ''
				}
			}
		},
		data() {
			return {
				color: '#fff',
				currentIndex: 0,
				srcImgMap: '../../../static/tabbar/map_active.png',
				srcImgList: '../../../static/tabbar/list.png',
				mapImg: ['../../../static/tabbar/map.png','../../../static/tabbar/map_active.png'],
				listImg: ['../../../static/tabbar/list.png','../../../static/tabbar/list_active.png']
			}
		},
		methods: {
			itemClick(index) {
				if(this.currentIndex != index) {
					this.currentIndex = index
					if(index == 0) {
						this.srcImgMap = this.mapImg[1]
						this.srcImgList = this.listImg[0]
					} else {
						this.srcImgList = this.listImg[1]
						this.srcImgMap = this.mapImg[0]
					}
				}
				this.$emit('mapListClick',index)
			}
		}
	}
</script>

<style scoped>
	.notify {
		width: 93%;
		background-color: #CFE4FF;
		margin: 0 auto 27.27rpx;
		display: flex;
		border-radius: 18.18rpx;
	}
	
	.switch {
		position: relative;
		flex: 1;
		
	}
	
	.switchBar {
		position: absolute;
		display: flex;
		background-color: #FFFFFF;
		width: 80%;
		height: 72.72rpx;
		border-radius: 18.18rpx;
		left: 23rpx;
		/* margin-left: 25.45rpx; */
		top: 14.54rpx;
	}
	
	.tabBtn {
		width: 54.54rpx;
		height: 54.54rpx;
		border: 1px solid #62A7FF;
		border-radius: 9.09rpx;
		margin: auto;
	}
	
	.active {
		background-color: #62A7FF;
	}
	
	.notices {
		flex: 2;
		/* height: 101.81rpx; */
	}
	
	.image {
		width: 54.54rpx;
		height: 54.54rpx;
	}
</style>
